<template>
	<view>
		<!-- 
		  indicator-dots 指示器   
		  autoplay: 自动轮播
		  interval: 轮播间隔时间
		  duration：轮播滑动时间
		-->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="item in bannerList" :key="item.id">
				<view>
					<!-- 模板中使用的 baseURL 必须是响应式数据 -->
					<image :src="baseURL + item.advImg" style="height: 200px; width: 100%"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 九宫格 -->
		<u-grid :border="false" col="4" style="margin: 10px 0px">
			<u-grid-item v-for="(listItem, listIndex) in list" :key="listIndex">
				<u-image :src="listItem.title" width="50px" height="50px"></u-image>
				<text class="grid-text">{{ listItem.name }}</text>
			</u-grid-item>
		</u-grid>

		<!-- 新闻分类列表 -->
		<view class="">
			<u-tabs :list="newsTypeList" @click="bindNewsItem"></u-tabs>
		</view>
		<!-- 新闻列表 -->
		<u-list>
			<u-list-item v-for="(item, index) in newsList" :key="item.id">
				<view class="g-news-item" @click="bindNewsDetail(item.id)">
					<u-image :src="baseURL + item.cover" width="100px" height="100px"></u-image>
					<view class="g-news-right">
						<view class="m-title">{{ item.title }}</view>
						<!-- <view class="m-content ellipsis">{{ item.content }}</view> -->
						<view class="m-commont">{{ item.createTime }}</view>
					</view>
				</view>
			</u-list-item>
		</u-list>
	</view>
</template>

<script>
	import {
		baseURL,
		requestBanner,
		requestNewCategoryList,
		requestNewList
	} from "../../api/requestUtil.js";

	export default {
		data() {
			return {
				baseURL: baseURL,
				bannerList: [],
				list: [{
						name: "青年驿站",
						title: "/static/images/qnyz.png",
					},
					{
						name: "数据分析",
						title: "/static/images/sjfx.png",
					},
					{
						name: "政府热线",
						title: "/static/images/zfrx.png",
					},
					{
						name: "爱心公益",
						title: "/static/images/axgy.png",
					},
					{
						name: "智慧交通",
						title: "/static/images/zhjt.png",
					},
					{
						name: "智慧医疗",
						title: "/static/images/zhyl.png",
					},
					{
						name: "智慧教育",
						title: "/static/images/zhjy.png",
					},
					{
						name: "更多服务",
						title: "/static/images/more.png",
					},
				],
				// 新闻分类
				newsTypeList: [],
				//新闻列表
				newsList: [],
			};
		},
		methods: {
			getBanner() {
				// uni全局对象，程序启动时自动初始化
				// uni.request() 返回是一个promise对象
				requestBanner().then((res) => {
					const data = res.data;
					this.bannerList = data.rows;
				});
			},
			// 获取新闻分类
			getNewsList() {
				requestNewCategoryList().then((res) => {
					const data = res.data;
					this.newsTypeList = data.data;
				});
			},
			//新闻列表
			bindNewsItem(item) {
				requestNewList(item.id)
					.then((res) => {
						const data = res.data;
						this.newsList = data.rows;
						console.log("newLists ", this.newsList);
					});
			},
			bindNewsDetail(id) {
				console.log("bindNewDetail >> ", id);
				// 路由跳转到新闻详情
				uni.navigateTo({
					url: `/pages/newsDetail/newsDetail?id=${id}`,
				});
			},
		},
		mounted() {
			this.getBanner();
			this.getNewsList();
			this.bindNewsItem(9);
		},
	};
</script>

<style scoped>
	.g-news-item {
		display: flex;
		padding: 10px;
	}

	.g-news-right {
		margin-left: 5px;
	}

	.ellipsis {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}
</style>